<template>
	<div class="wrapper">
				<div class="back-icon" @click="goBack()">
					<i class="fa fa-arrow-left"></i>
				</div>
		<!-- header部分 -->
		<header>
			<p>新建</p>
		</header>
		<!-- 商家logo部分 -->
		<div>
			</div>

			<!-- 编辑表单部分 -->
			<div class="food-edit-form">
			<label for="foodName">商品名称：</label>
			<input type="text" v-model="food.foodName" placeholder="输入食品名称" />

			<label for="foodPrice">商品价格：</label>
			<input type="number" v-model="food.foodPrice" placeholder="输入食品价格" />

			<label for="foodExplain">商品描述：</label>
			<textarea v-model="food.foodExplain" placeholder="输入食品描述"></textarea>

			<button @click="addFood()">新建商品</button>
		</div>
	</div>
</template>

<script>
	import Backbutton from '../components/Backbutton.vue';
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive} from 'vue';
	export default{
		name:'FoodCreate',
		 setup() {
		    const currentInstance = getCurrentInstance();
		    const router = useRouter();
		    const route = useRoute();
		    const businessId = route.params.businessId;
			const user = ref({});
		    const food = ref({
		      foodId:'',
			  foodName: '',
		      foodExplain: '',
		      foodImg: '',
		      foodPrice: 0,
		      remarks: '',
		      businessId: ''
		    });
		
		    const goBack = () => {
		      router.go(-1);
		    };
		
		    const addFood = () => {
		      if (food.value.foodName === '') {
		        swal('商品名称不能为空！');
		        return;
		      }
		      if (food.value.foodExplain === '') {
		        swal('商品描述不能为空！');
		        return;
		      }
		      if (food.value.foodPrice <= 0) {
		        swal('商品价格必须大于0！');
		        return;
		      }
		      food.value.businessId = user.value.userId;
		
		      currentInstance.appContext.config.globalProperties.$axios.post(
		        'FoodController/addFoodByBusinessId',
		        currentInstance.appContext.config.globalProperties.$qs.stringify(food.value)
		      ).then(response => {
		        if (response.data > 0) {
		          swal('添加商品成功！');
		          router.push({ name: 'GoodsVue', params: { businessId: businessId } });
		        } else {
		          swal('添加商品失败！');
		        }
		      }).catch(error => {
		        console.error(error);
		      });
		    };
		onMounted(() => {
			user.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('user');
		});
		
		    return {
		      businessId, food,user,
		      addFood, goBack
		    };
		  },
	}
</script>

<style scoped>
	/*************** 总容器 ***************/
	.wrapper {
		width: 100%;
		height: 100%;
	}
	/*********** 回退按钮 ***********/
	.wrapper .back-icon{
		width: 12vw;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.business-logo {
		width: 100%;
		height: 35vw;
		margin-top: 12vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
		}

	/****************** 编辑表单部分 ******************/
	.food-edit-form {
		margin: 15vw 5vw;
		display: flex;
		flex-direction: column;
	}

	.food-edit-form label {
		font-size: 4vw;
		margin-bottom: 2vw;
	}

	.food-edit-form input,
	.food-edit-form textarea {
		width: 100%;
		padding: 3vw;
		font-size: 4vw;
		margin-bottom: 5vw;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.food-edit-form button {
		padding: 3vw;
		background-color: #0097ff;
		color: white;
		border: none;
		font-size: 4vw;
		border-radius: 10px;
		cursor: pointer;
	}
</style>
